<template>
  <div class="content">
    <el-card shadow="always" :body-style="{ padding: '20px' }">
      <div slot="header">
        <el-button
          v-btn-permi:add
          type="primary"
          size="default"
          @click="add"
        >新增</el-button>
      </div>
      <div class="table-holder">

        <!-- 文章展示表格 -->
        <el-table :data="addressList" border style="width: 100%">
          <el-table-column fixed="left" type="index" label="#" width="50" />
          <el-table-column prop="addressName" label="地址名称" width="200" />
          <el-table-column label="默认发货地址" width="200">
            <template slot-scope="scope">
              <span>默认发货地址</span>
              <el-switch
                :value="scope.row.sendStatus"
                :active-value="1"
                :inactive-value="0"
                @change="setSend($event,scope.row.id)"
              />
            </template>
          </el-table-column>
          <el-table-column prop="name" label="收货人姓名" width="100" />
          <el-table-column prop="phone" label="收货人电话" width="150" />
          <el-table-column label="收货人地址" width="200">
            <template slot-scope="scope">
              <p>{{ scope.row.province }}</p>
              <p>{{ scope.row.city }}</p>
              <p>{{ scope.row.region }}</p>
              <p>{{ scope.row.detailAddress }}</p>
            </template>
          </el-table-column>
          <el-table-column label="默认收货地址" width="200">
            <template slot-scope="scope">
              <span>默认收货地址</span>
              <el-switch
                :value="scope.row.receiveStatus"
                :active-value="1"
                :inactive-value="0"
                @change="setReceive($event,scope.row.id)"
              />
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" width="200" />
          <el-table-column fixed="right" label="操作" width="200">
            <template slot-scope="scope">
              <el-button
                v-btn-permi:edit
                type="text"
                size="small"
                icon="el-icon-view"
                @click="edit(scope.row)"
              >编辑</el-button>
              <el-button
                v-btn-permi:remove
                type="text"
                style="color: red"
                size="small"
                @click="remove(scope.row.id)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>

    <div class="pop">
      <el-dialog title="地址详情" width="65%" :visible.sync="dialogVisible">
        <div class="form-box">
          <el-form ref="adForm" size="mini" :model="addressInfo" :rules="rules" label-width="100px" class="demo-ruleForm">
            <el-form-item label="发货地址" prop="addressName">
              <el-input v-model="addressInfo.addressName" />
            </el-form-item>
            <el-form-item label="发货人姓名" prop="name">
              <el-input v-model="addressInfo.name" />
            </el-form-item>
            <el-form-item label="发货人手机号" prop="phone">
              <el-input v-model="addressInfo.phone" />
            </el-form-item>
            <el-form-item label="邮政编码" prop="postCode">
              <el-input v-model="addressInfo.postCode" />
            </el-form-item>
            <el-form-item label="收货地址" prop="address">
              <el-cascader
                v-model="address"
                :options="cityData"
                @change="addressCascaderChange"
              />
            </el-form-item>
            <el-form-item label="详细地址" prop="detailAddress ">
              <el-input v-model="addressInfo.detailAddress " />
            </el-form-item>
            <el-row :gutter="20">
              <el-col :span="12" :offset="0">
                <el-form-item label="默认收货地址" prop="detailAddress ">
                  <el-switch
                    v-model="addressInfo.receiveStatus"
                    :active-value="1"
                    :inactive-value="0"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12" :offset="0">
                <el-form-item label="默认发货地址" prop="detailAddress ">
                  <el-switch
                    v-model="addressInfo.sendStatus"
                    :active-value="1"
                    :inactive-value="0"
                    filterable
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <el-form-item>
              <el-button type="primary" @click="submit">提交</el-button>
              <el-button @click="close">取消</el-button>
            </el-form-item>
          </el-form>

        </div>

      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  requestAddressList,
  setSendOne,
  setReceiveOne,
  deleteAddress,
  addAddress,
  updataAddress,
  requestAddressInfo
} from '@/api/order'

import cityData from '@/utils/city_data2017_element'
export default {
  data() {
    return {
      cityData: cityData,
      // 接收地址选择器值
      address: [],
      // 订单列表
      addressList: [],
      addressInfo: {
        'addressName': '',
        'city': '',
        'cityCode': '',
        'detailAddress': '',
        'id': '',
        'name': '',
        'phone': '',
        'postCode': '',
        'province': '',
        'receiveStatus': 0,
        'region': '',
        'sendStatus': 0
      },
      dialogVisible: false,
      rules: {
        addressName: [
          { required: true, message: '请输入广告名称', trigger: 'blur' }
        ]
      },
      isCreate: false
    }
  },
  watch: {
    dialogVisible(val, oldVal) {
      if (!val) {
        this.reset()
      }
    }
  },
  created() {
    this.getData()
  },
  methods: {
    // 获取地址列表信息
    getData() {
      requestAddressList().then((res) => {
        // console.log(res)
        this.addressList = res.data.items
      })
    },
    // 新增地址
    add() {
      this.isCreate = true
      this.dialogVisible = true
    },
    // 编辑地址
    edit(item) {
      requestAddressInfo(item.id).then(res => {
        console.log(res)
        const addInfo = res.data.address
        this.addressInfo = addInfo
        this.address = [addInfo.province, addInfo.city, addInfo.region]
        this.dialogVisible = true
      })
    },
    // 提交修改
    submit() {
      if (this.isCreate) {
        addAddress(this.addressInfo).then(res => {
          console.log(res)
          if (res.code === 20000) {
            this.$message({
              message: '添加成功',
              type: 'success'
            })
            this.dialogVisible = false
            this.getData()
          } else {
            this.$message({
              message: '添加失败',
              type: 'error'
            })
          }
        })
      } else {
        updataAddress(this.addressInfo).then(res => {
          console.log(res)
          if (res.code === 20000) {
            this.$message({
              message: '修改成功',
              type: 'success'
            })
            this.dialogVisible = false
            this.getData()
          } else {
            this.$message({
              message: '修改失败',
              type: 'error'
            })
          }
        })
      }
    },
    // 取消修改
    close() {
      this.dialogVisible = false
    },
    // 关闭弹窗重置数据
    reset() {
      this.resetData()
      this.address = []
    },
    // 地址级联选择器改变
    addressCascaderChange() {
      console.log(this.address)
      this.addressInfo.province = this.address[0]
      this.addressInfo.city = this.address[1]
      this.addressInfo.region = this.address[2]
    },
    resetData() {
      this.addressInfo = {
        'addressName': '',
        'city': '',
        'cityCode': '',
        'detailAddress': '',
        'id': '',
        'name': '',
        'phone': '',
        'postCode': '',
        'province': '',
        'receiveStatus': 0,
        'region': '',
        'sendStatus': 0
      }
    },
    // 设置默认发货地址
    setSend(e, id) {
      console.log(e)
      setSendOne({ id, sendStatus: e }).then(res => {
        console.log(res)
        if (res.code === 20000) {
          this.$message({
            message: '设置默认发货地址成功',
            type: 'success'
          })
        } else {
          this.$message({
            message: '设置默认发货地址失败',
            type: 'success'
          })
        }
        this.getData()
      })
    },
    // 设置默认收货地址
    setReceive(e, id) {
      console.log(e)
      setReceiveOne({ id, sendStatus: e }).then(res => {
        console.log(res)
        if (res.code === 20000) {
          this.$message({
            message: '设置默认收货地址成功',
            type: 'success'
          })
        } else {
          this.$message({
            message: '设置默认收货地址失败',
            type: 'error'
          })
        }
        this.getData()
      })
    },
    // 移除地址
    remove(id) {
      console.log(id)
      const _this = this
      this.$confirm('是否删除地址', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          deleteAddress(id).then((res) => {
            // console.log(res);
            if (res.code === 20000) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              _this.getData()
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    }
  }
}
</script>

@import '@/style/index.scss'

<style lang="scss" scoped>
.content {
  .image {
    width: 80%;
    height: 80%;
  }

  .input-holder{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 80%;

    span{
      width: 90px;
    }
  }
}
</style>
